<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>html</li>
			<li>css</li>
			<li>javascript</li>
			<li>vue</li>
		</ul>
		<script>
			// 闭包是一个函数，一个作用域可以访问其他函数内部的局部变量
			// 作用:延伸了变量的作用范围
			function fn() {
				var num = 10;
				// function fun(){
				// 	console.log(num);
				// }
				// return fun;
				return function fun() {
					console.log(num);
				}
			}
			var f = fn();
			f();
			
			// 案例1
			// 点击li,输出当前的li索引号
			// 1.利用动态添加属性的方式
			var lis = document.querySelectorAll('li');
			for (var i = 0; i < lis.length; i++) {
				lis[i].index = i;
				lis[i].onclick = function() {
					console.log(this.index);
				} //(推荐)
			}
			
			// 2.利用闭包的方式	
			//    for(var i = 0; i < lis.length; i++){
			// 	// 利用for循环创建了4个立即执行函数
			// 	(function(i){
			// 		lis[i].onclick = function(){
			// 		    console.log(i);
			// 		}
			// 	})(i);
			// }
			// 3.利用闭包3秒钟之后打印所有的li元素内容
			for (var i = 0; i < lis.length; i++) {
				(function(i) {
					setTimeout(() => {
						console.log(lis[i].innerHTML);
					}, 3000);
				})(i)
			}
			
			// 案例2 计算打车价格
			// 打车起步价13(3公里内),之后每多一公里增加5块钱,用户输入公里数就可以计算打车价格		
			// 如果有拥堵情况,总价格多收10块钱拥堵费
			var car = (function() {
				var start = 13;
				var total = 0;
				return {
					price: function(n) {
						if (n <= 3) {
							total = start;
						} else {
							total = start + (n - 3) * 5;
						}
						return total;
					},
					yd: function(flag) {
						return flag ? total + 10 : total;
					}
				}
			})();
			console.log(car.price(5)); //23
			console.log(car.yd(true)); //33

			console.log(car.price(1)); //13
			console.log(car.yd(false)); //13
		</script>
	</body>
</html>
